<template>
    <div class="basic-shape-icon__wrap">
        <n-tooltip 
            v-for="(item, index) in elementShapes" 
            :key="index" 
            placement="bottom" 
            trigger="hover"
        >
            <template #trigger>
                <span :class="[
                        'draw-action_icon',
                        { 'is-active': activeIndex === index && item.isChecked }
                    ]" 
                    @click.stop="handleAddItem(item, index)">
                    <i :class="[`${item.icon}`]" ></i>
                </span>
            </template>
            <span>{{ item.textTip }}</span>
        </n-tooltip>
    </div>
</template>

<script setup name="ToolsIcon">
import { v4 as uuidV4 } from 'uuid'
import useSharedCore from "@/hooks/shared";
import { config } from "../config/editor";
import { createShape } from "../utils/createShape";

const { toolIcon } = config;
const elementShapes = ref(toolIcon)
const { coverEditor, fabric } = useSharedCore();

let shape = null;
const defOptions = {
    isDrawingLineMode: false,
    lineType: false,
    bgColor: '#18a058',
    lastPt: 1,
    points: [],
    mouseDown: false,
    strokeWidth: 1,
    fill: 'rgba(2, 0, 36, 1)'
}
const state = ref({...defOptions});
const activeIndex = ref(-1)

function handleAddItem(item, index) {
    item.isChecked = !item.isChecked
    activeIndex.value = index
    state.value.isDrawingLineMode = item.isChecked;
    // 关掉画笔工具
    coverEditor.canvas.isDrawingMode = false
    switch (item.type) {
        case 'DrawPolyline':
            coverEditor.canvas.setCursor('default')
            state.value.lineType = 'Polyline'
            state.value.bgColor = ''
            coverEditor.setDrawingType(item.type)
            coverEditor.setMode( state.value.isDrawingLineMode)
            break;
        case 'DrawPolygon':
            coverEditor.canvas.setCursor('default')
            state.value.lineType = 'Polygon'
            state.value.bgColor = '#18a058'
            coverEditor.setDrawingType(item.type)
            coverEditor.setMode( state.value.isDrawingLineMode)
            break;
        case 'PencilBrush':
            state.value.lineType = 'PencilBrush'
            coverEditor.canvas.isDrawingMode = true
            coverEditor.setDrawingType(item.type)
            coverEditor.setMode(state.value.isDrawingLineMode)
            state.value = { ...defOptions }
            break;
        case 'Line':
            coverEditor.canvas.setCursor('crosshair')
            state.value.lineType = item.type;
            coverEditor.setMode(state.value.isDrawingLineMode);
            coverEditor.setDrawingType(item.type);
            break;
        case 'HosooArrow':
        case 'LineArrow':
        case 'LineSolidArrow':
            state.value.lineType = item.type;
            coverEditor.setMode(state.value.isDrawingLineMode);
            coverEditor.setDrawingType(item.type);
            break;
        default:
            state.value.lineType = ''
            shape = createShape(item.type, coverEditor.canvas);
            if (shape && coverEditor.canvas) {
                coverEditor.canvas.add(shape);
                coverEditor.canvas.setActiveObject(shape);
                coverEditor.canvas.renderAll();
                // 恢复初始值
                state.value = { ...defOptions }
            }
            break;
    }
}

// 此处监听选中元素或者绘制元素结束时会触发
// 原因：绘制line元素后会选中当前元素
function getActiveObjectAttr(params) {
    if (params && params.length > 0) {
        // 如果已选择图层，需要恢复工具状态
        // activeIndex.value = -1
        // state.value = { ...defOptions }
    }
}

function drawingComplete (params) {
    if (params) {
        // state.value = { ...defOptions }
    }
}

onMounted(() => {
    // 监听fabric选中更新的selectOne事件
    // selectOne 事件在ServePlugin插件注入的
    coverEditor.on('selectOne', getActiveObjectAttr);

    // 监听绘制完成回调，做一些恢复操作
    coverEditor.on('onDrawingComplete', drawingComplete)
})

onBeforeUnmount(() => {
    coverEditor.off('selectOne', getActiveObjectAttr);
    coverEditor.off('onDrawingComplete', drawingComplete)
})
</script>

<style lang="scss" scoped>
    .basic-shape-icon__wrap {
        // display: flex;
        // flex-wrap: wrap;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        .draw-action_icon {
            // flex: 1;
            text-align: center;
            border-radius: 4px;
            transition: color,background 0.1s ease;
            &.is-active {
                color: $activeColor;
                background: $activeBgColor;
            }
            .icon {
                flex: 0 0 50px;
                font-size: 1.5rem;
                cursor: pointer;
                padding: 6px 8px;
            }
        }
    }
</style>
